<template>
  <div class="content" v-loading="infoLoading">
      <!--    某某公司详情详情-->
    <template v-if="info.logo&&info.name&&info.address&&info.introduce!=''">
      <div class="left-block">
        <div class="left-top-block">
          <img :src="info.logo" alt="">
          <div class="info">
            <div class="company-info">
              <div class="company-title">
                {{ info.name }}
              </div>
              <div class="small-title">
                ⽤⼯⽅ {{ info.employer_score }} ·零⼯⽅ {{ info.workers_score }}
              </div>
            </div>
          </div>
        </div>
        <div class="left-bottom-block" v-loading="infoLoading">
          <div class="title">
            公司地址
          </div>
          <div class="location">
            <div class="site">
              {{ info.address }}
            </div>
          </div>
        </div>
      </div>
      <div class="middle-block" v-if="introduceLength>300">
        <div class="title">公司介绍</div>
        <div class="text" style="overflow-y: scroll;height: 450px">
          {{ info.introduce }}
        </div>
      </div>
      <div class="middle-block" v-else>
        <div class="title">公司介绍</div>
        <div class="text">
          {{ info.introduce }}
        </div>
      </div>

      <div class="right-block">
        <div class="title">公司评价</div>
        <div class="evaluation-selection">
          <router-link :to="{ path:'/CompanyDetail/RecruiterEvaluate',query:{associated_id:info.id} }">
            <div class="select-title">
              <!--            <div class="select-title" @click="tabActive == 0" :class="tabActive==0 ? 'active' : ''">-->
              用工方评价
            </div>
          </router-link>
          <router-link :to="{ path:'/CompanyDetail/HunterEvaluate',query:{associated_id:info.id} }">
            <div class="select-title1">
              零工方评价
            </div>
          </router-link>
        </div>
        <div class="striping"></div>
        <router-view/>
      </div>
    </template>
    <el-empty v-else class="not-available" style="position: absolute;left: 60%;top: 40%;transform: translate(-160px,50px)"></el-empty>
  </div>
</template>

<script>
import {departmentDetailApi} from "@/api/supermarket";
export default {
  name: "CompanyDetail",
  data(){
    return{
      info:{},
      associated_id:5,
      infoLoading:false
    }
  },
  methods:{
    getDepartmentDetail() {
      this.infoLoading = true
      const id = this.id
      departmentDetailApi(id).then((res) => {
        this.info = res;
      }).finally(()=>{
        this.infoLoading = false
      })
    },
  },
  computed:{
    introduceLength:function (){
      return this.info.introduce.length
    }
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getDepartmentDetail()
  }
}
</script>

<style lang="scss" scoped>
.content{
  box-sizing: border-box;
  width: 800px;
  border-radius: 20px;
  margin: 20px auto;
  .left-block{
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .left-top-block{
      display: flex;
      align-items: center;
      width: 100%;
      height: 25%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      //margin-top: 18px;
      background-color: #fff;
      img{
        width: 75px;
        height: 75px;
        border-radius: 60px;
        margin-right: 15px;
      }
      .img{
        width: 30px;
        height: 30px;
        margin-left: 133px;
        margin-top: 10px;

      }
      .info{
        display: flex;
        box-sizing: border-box;
        .company-info{
          //padding-top: 15px;
          .company-title{
            font-weight: 500;
          }
          .small-title{
            margin-top: 10px;
          }
        }

      }
    }
    .left-bottom-block{
      width: 100%;
      height: 25%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      margin: 20px 0;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .location{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 25px;
        text-align: center;
        font-size: 20px;
        .site{
          line-height: 37px;
        }
        .map{
          display: flex;
          box-sizing: border-box;
          width: 110px;
          height: 40px;
          text-align: center;
          line-height: 37px;
          color: #498CF3;
          border: 1px solid #498CF3;
          padding-left: 13px;
          border-radius: 20px;
          box-shadow: 0px -1px 0px 0px #e5e5e5,
          -0.2px 0px 0px 0px #e5e5e5,
          0.2px 0px 0px 0px #e5e5e5,
          0px 1px 0px 0px #e5e5e5;
          span{
            margin-bottom: 10px;
          }
          img{
            margin-top: 5px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }

  }
  .middle-block{
    width: 100%;
    background-color: #fff;
    padding: 20px 20px;
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .text{
      width: 100%;
      height: calc((100% - 70px)/1);
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
      line-height: 40px;
      margin-top: 25px;
    }
  }
  .right-block{
    width: 100%;
    background-color: #fff;
    padding: 20px 20px;
    border-radius: 15px;
    box-sizing: border-box;
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .evaluation-selection{
      display: flex;
      width: 100%;
      margin-top: 20px;
      .router-link-active {
        text-decoration: none;
        color: #FFF;
        background-color: #4E8FF3;
        width: 130px;
        height: 40px;
        border: 1px solid #498CF3;
        border-radius: 30px;
        text-align: center;
        line-height: 40px;
        margin-right: 15px;
      }
      a{
        text-decoration: none;
        color: #4E8FF3;
        background-color: #fff;
      }
      .select-title{
        width: 130px;
        height: 40px;
        border: 1px solid #498CF3;
        border-radius: 30px;
        text-align: center;
        line-height: 40px;
        margin-right: 15px;
      }
      .select-title1{
        width: 130px;
        height: 40px;
        border: 1px solid #498CF3;
        border-radius: 30px;
        text-align: center;
        line-height: 40px;
      }
    }
    .striping{
      margin: 20px 0;
      width: 100%;
      height: 1px;
      background-color: #D8D8D8;
    }
  }
}
</style>
